<template>
  <div class="section" ref="parent">
    
    
    
  </div>
</template>
<script>
import { getMiddleData } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      chartData: null,
      dataAll:{},
      itemWidth:''
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30 + 'px',
        height: this.height-10 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.itemWidth = this.chartsDom.height ;
    this.$nextTick(_=>{
      this.init();
    })
  },
  methods: {
    init(){
      
    },
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
    margin-top 20px;
  .box
    text-align center
    display flex
    justify-content center
    flex-direction column
    align-items center
    
  .mid-bg-1
    background-image url(./../../../assets/images/bg-mid-1.png);
    margin 0 40px
    background-size 100% 100%;
    color rgb(255,247,67)
  .mid-bg-2
    background-image url(./../../../assets/images/bg-mid-2.png);
    margin 0 40px
    background-size 100% 100%;
    color rgb(33,114,197)
  .mid-bg-3
    background-image url(./../../../assets/images/bg-mid-3.png);
    margin 0 40px
    background-size 100% 100%;
    color rgb(22,241,168)
</style>